<template>
  <div>
    <div id="icon">
      <i class="el-icon-s-data"></i>
      课表查询
    </div>
    <div id="formView">
      <el-row>
        <el-col :span="24">

          <table width="100%">
            <thead>
              <tr style="background-color: rgb(103,161,255);color:white">
                <th style="width: 120px">时间</th>
                <th style="width: 120px">周一</th>
                <th style="width: 120px">周二</th>
                <th style="width: 120px">周三</th>
                <th style="width: 120px">周四</th>
                <th style="width: 120px">周五</th>
                <th style="width: 120px">周六</th>
                <th style="width: 120px">周天</th>
              </tr>
            </thead>
            <tbody>
            <tr v-for="(n,i) in tableData" style="height: 60px">
              <td>
                {{returnLession(i+1)}}
              </td>
              <td v-for="t in n">
                {{t.courseName}}
                <div class="fontsty">
                  {{t.teacherName}} <br>
                  {{t.courseLocation}}
                </div>
              </td>
            </tr>
            </tbody>

          </table>


        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    import {get} from "../../../common/request";

    export default {
        name: "CourseTable",
        data(){
          return{
            table:[],
            tableData:[
              {
                courseName: "",
                teacherName: "",
                courseLocation: ""
              }
            ]
          }
        },
        methods:{
          createTable() {
            for (let i = 0; i <10 ; i++) {
              var row = [];
              for (let j = 0; j <7 ; j++) {
                row[j]={
                  courseName: "",
                  teacherName: "",
                  courseLocation: ""
                }
              }
              this.table[i] = row;
            }
          },
          getData(){
            this.createTable();
            get("/rc-student-course/studentCourseTime").then(x=>{
              if (x.code==1){
                var list = x.data;
                for (let i = 0; i <list.length ; i++) {
                    this.setTimeData(list[i]);
                }
                this.tableData=this.table;
              }
            });
          },
          setTimeData(item){
            let split =item.courseTime.split("-");
            let day = split[0];
            let lession = split[1];
            let count = split[2];
            for (let i = 0; i <count ; i++) {
              this.table[lession-1+i][day-1]={
                courseName: item.courseName,
                teacherName: item.teacherName,
                courseLocation: item.courseLocation
              }
            }  
          },
          returnLession(num) {
            switch (num) {
              case 1:
                return "第一节";
              case 2:
                return "第二节";
              case 3:
                return "第三节";
              case 4:
                return "第四节";
              case 5:
                return "第五节";
              case 6:
                return "第六节";
              case 7:
                return "第七节";
              case 8:
                return "第八节";
              case 9:
                return "第九节";
              case 10:
                return "第十节";
            }
          }
        },
      created() {
        this.getData();
      },
      mounted() {
        // console.log(1)
        this.getData();
      }
    }
</script>

<style scoped>
  td {
    background-color: rgb(234, 242, 255);
  }
  #icon{
    text-align: left;
    color: gray;
    line-height: 20px;
  }
  .fontsty {
    color: grey;
    font-size: 9px;
  }
  #formView{
    background-color: white;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin-top: 10px;
    padding: 10px 30px 10px 30px;
    font-size: 10px;
  }
</style>
